{% extends "base.html" %}

{% block title %}数据解密 - 自动化脱敏系统{% endblock %}

{% block content %}
<div class="main-content">
    <div class="upload-card" style="width: 800px;padding-left: 40px;border-left-width: 10px;">
        <h2 class="upload-title">
            <i class="fas fa-unlock-alt"></i>
            加密数据解密
        </h2>

        <form method="post" enctype="multipart/form-data" class="decrypt-form">
            <!-- 文件上传区块 -->
            <div class="form-section" style="position: relative;">
                <h3><i class="fas fa-file-import"></i> 选择加密文件</h3>
                <label class="custom-file-upload">
                    <input type="file" name="file" required accept=".csv" 
                           onchange="document.getElementById('fileName').textContent = this.files[0].name">
                    <div class="file-input-box">
                        <i class="fas fa-folder-open"></i>
                        <span id="fileName">点击选择文件</span>
                    </div>
                </label>
            </div>

            <!-- 密钥输入区块 -->
            <div class="form-section">
                <h3><i class="fas fa-key"></i> 输入解密密钥</h3>
                <div class="input-group">
                    <input type="text" name="key" 
                           class="input-field" 
                           placeholder="请输入16/24/32位密钥"
                           style="padding-left: 40px;">
                    <i class="fas fa-key input-icon"></i>
                </div>
            </div>

            <!-- 错误提示 -->
            <div id="errorMsg" class="alert-error" style="display: none;"></div>

            <button type="submit" class="submit-btn">
                <i class="fas fa-play-circle"></i>
                开始解密处理
            </button>
        </form>
    </div>
</div>

<style>
    .decrypt-form {
        padding: 20px;
    }

    .custom-file-upload {
        display: block;
        margin: 15px 0;
        cursor: pointer;
    }

    .file-input-box {
        border: 2px dashed #3498db;
        border-radius: 8px;
        padding: 25px;
        text-align: center;
        transition: all 0.3s;
        background: #f8fbff;
    }

    .file-input-box:hover {
        background: #e3f2fd;
        transform: translateY(-2px);
    }

    .file-input-box i {
        font-size: 24px;
        color: #3498db;
        margin-bottom: 10px;
    }

    .input-group {
        position: relative;
    }

    .input-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #7f8c8d;
    }

    .alert-error {
        background: #fee;
        color: #e74c3c;
        padding: 12px;
        border-radius: 6px;
        margin: 15px 0;
        display: none;
    }
</style>

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        const keyInput = document.querySelector('input[name="key"]');
        const errorMsg = document.getElementById('errorMsg');
        
        if (!keyInput.value || ![16, 24, 32].includes(keyInput.value.length)) {
            e.preventDefault();
            errorMsg.style.display = 'block';
            errorMsg.textContent = '⚠️ 密钥必须为16/24/32位字符！';
            keyInput.focus();
            keyInput.style.borderColor = '#e74c3c';
        } else {
            errorMsg.style.display = 'none';
            keyInput.style.borderColor = '#e0e7ff';
        }
    });
</script>
{% endblock %}